import React from "react";

const products = [
  { title: "土豆", isFruit: false, id: 1 },
  { title: "香蕉", isFruit: true, id: 2 },
  { title: "西瓜", isFruit: true, id: 3 }
];

const ShoppingList: React.FC = () => {
  const listItems = products.map(product => (
    <li key={product.id} style={{ color: product.isFruit ? "red" : "black" }}>
      {product.title}
    </li>
  ));

  return (
    <>
      <h3>ShoppingList</h3>
      <ul>{listItems}</ul>
    </>
  );
};
export default ShoppingList;
